<template>
	<view>
		<hjx-header></hjx-header>

		<hjx-tabs :tabs="tabsList" @tabsChange="handleTabsChange"></hjx-tabs>

		<view class="">
			<hjx-goods v-for="(item,index) in newGoodsList" :key="index" :goods="item"></hjx-goods>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 选项卡数据
				tabsList: [{
					id: 0,
					value: "综合",
					isActive: true
				}, {
					id: 1,
					value: "价格 ↑",
					isActive: false
				}, {
					id: 2,
					value: "价格 ↓",
					isActive: false
				}],
				//向商品列表搜索接口发送请求时数据
				queryParam: {
					query: '',
					cid: '',
					pagenum: 1,
					pagesize: 10
				},
				goodsList: []
			};
		},
		onLoad(e) {
			this.queryParam.cid = e.cid;
			this.getGoodsList();

		},
		onReachBottom() {
			// 判断是否还有下一页数据,如当前页码大于等于总数也,则没有下一页数据
			if (this.queryParam.pagenum >= this.totalPageCount) return uni.showToast({
				title: '数据加载完毕'
			})

			this.queryParam.pagenum++;
			this.getGoodsList();
		},
		onPullDownRefresh() {
			this.goodsList = [];
			this.queryParam.pagenum = 1;
			setTimeout(() => {
				this.getGoodsList(() => uni.stopPullDownRefresh());
			}, 1000)
		},
		methods: {
			// 切换选项卡
			handleTabsChange(activeId) {
				this.tabsList.forEach(v => v.id == activeId ? v.isActive = true : v.isActive = false)
			},
			async getGoodsList(cb) {
				const res = await this.$Https({
					url: '/goods/search',
					data: this.queryParam
				});

				console.log(res);
				// this.goodsList = res.message.goods;

				cb && cb();
				// 计算总页数
				this.totalPageCount = Math.ceil(res.message.total / this.queryParam.pagesize);

				this.goodsList = [...this.goodsList, ...res.message.goods]
				console.log(this.goodsList);
			}
		},
		computed: {
			newGoodsList() {
				console.log('computedfang方法被调用');

				function compare(arg) {
					return function(a, b) {
						return a[arg], -b[arg];
					}
				}

				if (this.tabsList[0].isActive) {
					return this.goodsList;
				} else if (this.tabsList[1].isActive) {
					this.goodsList.sort(compare('goods_price'));
					return this.goodsList;
				} else {
					this.goodsList.sort(compare('goodss_price'));
					this.goodsList.reverse();
					return this.goodsList;
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		padding-bottom: 90rpx;
	}

	.goods-swiper {
		swiper {
			width: 750rpx;
			height: 500rpx;

			swiper-item {
				display: flex;
				justify-content: center;
				align-items: center;

			}

			image {
				width: 70%;
				height: 70%;
			}
		}
	}

	.goods_price {
		padding: 15rpx;
		font-size: 32rpx;
		font-weight: 600;
		color: #ddaacc;
	}

	.goods_name_row {
		display: flex;
		padding: 15rpx 20rpx;
		border-bottom: 1px solid darkgray;
	}

	.goods_name {
		display: flex;
		flex: 5;
	}

	.goods_collect {
		display: flex;
		flex: 1;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.goods-tool {
		width: 100%;
		height: 90rpx;
		display: flex;
		position: fixed;
		left: 0;
		bottom: 0;
	}

	.tool-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: #ffffff;
		font-size: 26rpx;
		position: relative;

		button {
			width: 60%;
			height: 100%;
			margin: 0 20%;

			position: absolute;
			top: 0;
			left: 0;
			opacity: 0;
		}
	}

	.common {
		flex: 2;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.add-cart {
		background-color: #ddaacc;
		color: white;
	}

	.buy {
		background-color: #d41421;
		color: white;
	}
</style>
